<script setup lang="ts">
defineOptions({
  name: "GAS_OPERATION_OVERVIEW"
});

import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ArrowRightBold } from "@px-ui/icons-vue";
import {
  queryDeviceStatistics,
  queryPlatformOverview,
  queryBulkGasConsumptionStat,
  queryConsumptionAnalysis,
  queryGasNameList,
  queryDetectorStatusStat,
  queryDetectorIsolationTasks,
  queryAcidBucketTaskStat,
  queryGasCylinderStatusStat,
  queryGasCylinderTaskStat,
  queryTankTaskStat,
  queryAcidBucketStatusStat,
  querySpcExceedStat
} from "@/api/modules/operation";
import { queryDictData } from "@/api/common";
import fullScreen from "@/assets/svg/common/fullScreen.svg?component";
import { useLabelLayoutRingGraphFn, useLabelLayoutBarChartFn, useGetBarChartsAgOptions, useGetRingGraphAgOptions } from "@/hooks/useEcharts";
import { useRouterStoreHook } from "@/store/modules/router";
import echartsCom from "@/views/common/components/echartsCom/index.vue";
import echartsChart from "@/views/common/components/echartsChart/index.vue";
import deviceStatisticsTasks from "./components/deviceStatisticsTasks.vue";
import gasBoardBulkGasStatis from "./components/gasBoardBulkGasStatis.vue";
import gasBoardSpecialGasStatis from "./components/gasBoardSpecialGasStatis.vue";
import gasBoardChemicalsStatis from "./components/gasBoardChemicalsStatis.vue";
import gasBoardSPCStatis from "./components/gasBoardSPCStatis.vue";
import gasBoardShiftTable from "./components/gasBoardShiftTable.vue";
import overviewSecondRows from "./components/overviewSecondRows.vue";
import modelBox from "@/views/common/components/modelBox/index.vue";
import { deviceStatus } from "@/utils/constant";
import dayjs from "dayjs";
import topBoard from "@/views/common/topBoard/index.vue";

const router = useRouter();
const routerStore = useRouterStoreHook();
const height = ref<number>(234);
const deviceStatisticsTasksRef = ref<InstanceType<typeof deviceStatisticsTasks> | null>(null);
const deviceStatusMap = ref<Map<string, Record<string, any>>>(new Map());

// 大宗气耗量统计
const gasBoardBulkGasStatisRef = ref<InstanceType<typeof gasBoardBulkGasStatis> | null>(null);
// 特气耗量统计
const gasBoardSpecialGasStatisRef = ref<InstanceType<typeof gasBoardSpecialGasStatis> | null>(null);
// 化学品耗量统计
const gasBoardChemicalsStatisRef = ref<InstanceType<typeof gasBoardChemicalsStatis> | null>(null);
// SPC
const gasBoardSPCStatisRef = ref<InstanceType<typeof gasBoardSPCStatis> | null>(null);
// 交接班
const gasBoardShiftTableRef = ref<InstanceType<typeof gasBoardShiftTable> | null>(null);

// 数据  设备状态 + 今日任务
const deviceStatisticsQueryData = ref<any>(null);

// 设备状态
const deviceStatisticsRef = ref<InstanceType<typeof echartsChart> | null>(null);
const deviceStatisticsOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const deviceStatisticsTitle = ref<string>("设备状态");
// const deviceStatisticsInit = async () => {
//   if (!deviceStatisticsQueryData.value?.deviceStatusStat) return;
//   let keys = Object.keys(deviceStatisticsQueryData.value?.deviceStatusStat);
//   if (!keys?.length) return;
//   keys = keys.filter(key => !!deviceStatusMap.value.get(key));
//   const ec = await deviceStatisticsRef.value?.getEcharts();
//   ec?.getInstance()?.off("click");
//   ec?.getInstance()?.on("click", params => {
//     // /all/equip/runManage/status?eqpRunStatus=1&className=WATER
//     if (!!deviceStatusMap.value.get(params?.name)) {
//       const path = "/all/equip/runManage/status";
//       const eqpRunStatus = deviceStatusMap.value.get(params.name).value;
//       const className = "GAS";
//       const query = { eqpRunStatus, className };
//       router.push({ path, query });
//     }
//   });
//   const data = keys.map(key => {
//     if (!deviceStatusMap.value.get(key)) return null;
//     const value = deviceStatisticsQueryData.value?.deviceStatusStat[key];
//     return value;
//   });
//   const unit = "台";
//   const xAxisData = keys.map(key => deviceStatusMap.value.get(key)?.label || "");
//   const colorList = keys.map(key => deviceStatusMap.value.get(key)?.color || "");
//   const ag = useGetBarChartsAgOptions(xAxisData, data, false, "", colorList, 22);
//   deviceStatisticsOptions.value = useLabelLayoutBarChartFn(ec, xAxisData, data, deviceStatisticsTitle.value, unit, colorList, true, "top", ag);
//   deviceStatisticsRef.value?.loadingInstance?.close();
// };

// 今日报警
const alarmStatRef = ref<InstanceType<typeof echartsChart> | null>(null);
const alarmStatOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const alarmStatTitle = ref<string>("今日报警");
const startTime = dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss");
const endTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
const toPageMap = new Map([
  [
    "总报警",
    {
      path: "/all/alert/business",
      query: { className: "GAS", startTime, endTime }
    }
  ],
  [
    "已解决",
    {
      path: "/all/alert/business",
      query: { className: "GAS", active: "DONE", startTime, endTime }
    }
  ],
  [
    "待解决",
    {
      path: "/all/alert/business",
      query: { className: "GAS", startTime, endTime }
    }
  ]
]);

// const alarmStatInit = async () => {
//   if (!deviceStatisticsQueryData.value?.alarmStat) return;
//   const {
//     alarmStat: { total = 0, done = 0, undone = 0 }
//   } = deviceStatisticsQueryData.value;
//   const ec = await alarmStatRef.value?.getEcharts();
//   const xAxisData = ["待解决", "已解决", "总报警"];
//   const data = [undone, done, total];
//   const colorList = ["#FECD4B", "#19D08D", "#F45252"];
//   const ag = useGetBarChartsAgOptions(xAxisData, data, true, "", colorList, 22);
//   alarmStatOptions.value = useLabelLayoutBarChartFn(ec, xAxisData, data, alarmStatTitle.value, "", colorList, false, "", ag);
//   alarmStatRef.value?.loadingInstance?.close();
//   ec?.getInstance()?.off("click");
//   ec?.getInstance()?.on("click", params => {
//     const { path, query } = toPageMap.get(params.name);
//     if (!path) return;
//     router.push({ path, query });
//   });
// };

// 侦测器状态统计
const detectorStatusStatRef = ref<InstanceType<typeof echartsChart> | null>(null);
const detectorStatusStatOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const detectorStatusStatTitle = ref<string>("侦测器状态统计");
const detectorStatusStatInit = async () => {
  detectorStatusStatRef.value.initLoading();
  let metaData = await queryDetectorStatusStat(null, () => {
    detectorStatusStatRef.value?.loadingInstance?.close();
  });
  if (!metaData?.length) return detectorStatusStatRef.value?.loadingInstance?.close();
  const ec = await detectorStatusStatRef.value?.getEcharts();
  const data = metaData
    ?.filter(item => item.name !== "总计")
    ?.map(item => {
      const { name, num: value } = item;
      return { name, value };
    });
  const ag = useGetRingGraphAgOptions(metaData?.find(item => item.name === "总计")?.num);
  const colorList = new Map([
    ["报警", "#FF5639"],
    ["离线", "#aaa"],
    ["隔离", "#35CECB"],
    ["运行", "#3B82F6"],
    ["故障", "#FABF2B"],
    ["其它", "#CCB18F"]
  ]);
  const ag_2 = {
    legend: {
      data: Array.from(colorList.keys()),
      orient: "vertical",
      left: "left",
      top: "center"
    }
  };
  detectorStatusStatOptions.value = useLabelLayoutRingGraphFn(ec, data, detectorStatusStatTitle.value, "", colorList, { ...ag, ...ag_2 });
  console.log("detectorStatusStatOptions.value   ", detectorStatusStatOptions.value);
  detectorStatusStatRef.value?.loadingInstance?.close();
};

// 侦测器隔离今日任务
const detectorIsolationTasksRef = ref<InstanceType<typeof echartsChart> | null>(null);
const detectorIsolationTasksOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const detectorIsolationTasksTitle = ref<string>("侦测器隔离今日任务");
// const detectorIsolationTasksInit = async () => {
//   detectorIsolationTasksRef.value.initLoading();
//   let data = await queryDetectorIsolationTasks(null, () => {
//     detectorIsolationTasksRef.value?.loadingInstance?.close();
//   });
//   if (!data?.length) return detectorIsolationTasksRef.value?.loadingInstance?.close();
//   const ec = await detectorIsolationTasksRef.value?.getEcharts();
//   const xAxisData = data?.slice(1).map(item => item.name);
//   data = data?.slice(1).map(item => item.num);
//   const colorList = ["#3B82F6", "#FABF2B", "#35CECB", "#FF5639", "#FA8400", "#9755E5", "#355592"];
//   const ag = useGetBarChartsAgOptions(xAxisData, data, true, "", colorList);
//   detectorIsolationTasksOptions.value = useLabelLayoutBarChartFn(
//     ec,
//     xAxisData,
//     data,
//     detectorIsolationTasksTitle.value,
//     "",
//     colorList,
//     false,
//     "",
//     ag
//   );
//   detectorIsolationTasksRef.value?.loadingInstance?.close();
// };

// 酸桶更换今日任务
const acidBucketReplaceTasksRef = ref<InstanceType<typeof echartsChart> | null>(null);
const acidBucketReplaceTasksOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const acidBucketReplaceTasksTitle = ref<string>("酸桶更换今日任务");
const acidBucketReplaceTasksInit = async () => {
  acidBucketReplaceTasksRef.value.initLoading();
  let data = await queryAcidBucketTaskStat(null, () => {
    acidBucketReplaceTasksRef.value?.loadingInstance?.close();
  });
  if (!data?.length) return acidBucketReplaceTasksRef.value?.loadingInstance?.close();
  const ec = await acidBucketReplaceTasksRef.value?.getEcharts();
  const xAxisData = data?.slice(1).map(item => item.name);
  data = data?.slice(1).map(item => item.num);
  const colorList = new Map([
    ["已完成", "#48B48F"],
    ["执行中", "#49B0F5"],
    ["未开始", "#FFB266"]
  ]);

  const ag = useGetBarChartsAgOptions(xAxisData, data, true, "", colorList, 22);
  acidBucketReplaceTasksOptions.value = useLabelLayoutBarChartFn(
    ec,
    xAxisData,
    data,
    acidBucketReplaceTasksTitle.value,
    "",
    colorList,
    false,
    "",
    ag
  );
  acidBucketReplaceTasksRef.value?.loadingInstance?.close();
};

// 气瓶状态统计
const gasCylinderStatusStatRef = ref<InstanceType<typeof echartsChart> | null>(null);
const gasCylinderStatusStatOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const gasCylinderStatusStatTitle = ref<string>("气瓶状态统计");
const gasCylinderStatusStatInit = async () => {
  gasCylinderStatusStatRef.value.initLoading();
  let metaData = await queryGasCylinderStatusStat(null, () => {
    gasCylinderStatusStatRef.value?.loadingInstance?.close();
  });
  if (!metaData?.length) return gasCylinderStatusStatRef.value?.loadingInstance?.close();
  const ec = await gasCylinderStatusStatRef.value?.getEcharts();
  const data = metaData
    ?.filter(item => item.name !== "总计")
    ?.map(item => {
      const { name, num: value } = item;
      return { name, value };
    });
  const ag = useGetRingGraphAgOptions(metaData?.find(item => item.name === "总计")?.num);
  const colorList = new Map([
    ["送气中", "#3B82F6"],
    ["吹扫完成", "#35CECB"],
    ["待机中", "#FABF2B"],
    ["下线", "#FF5639"]
  ]);
  const ag_2 = {
    legend: {
      data: Array.from(colorList.keys()),
      orient: "vertical",
      left: "left",
      top: "center"
    }
  };
  gasCylinderStatusStatOptions.value = useLabelLayoutRingGraphFn(ec, data, gasCylinderStatusStatTitle.value, "", colorList, { ...ag, ...ag_2 });
  gasCylinderStatusStatRef.value?.loadingInstance?.close();
};

// 气瓶更换今日任务
const gasCylinderReplaceTasksRef = ref<InstanceType<typeof echartsChart> | null>(null);
const gasCylinderReplaceTasksOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const gasCylinderReplaceTasksTitle = ref<string>("气瓶更换今日任务");
const gasCylinderReplaceTasksInit = async () => {
  gasCylinderReplaceTasksRef.value.initLoading();
  let data = await queryGasCylinderTaskStat(null, () => {
    gasCylinderReplaceTasksRef.value?.loadingInstance?.close();
  });
  if (!data?.length) return gasCylinderReplaceTasksRef.value?.loadingInstance?.close();
  const ec = await gasCylinderReplaceTasksRef.value?.getEcharts();
  const xAxisData = data?.slice(1).map(item => item.name);
  data = data?.slice(1).map(item => item.num);
  const colorList = new Map([
    ["已完成", "#48B48F"],
    ["执行中", "#49B0F5"],
    ["未开始", "#FFB266"]
  ]);
  const ag = useGetBarChartsAgOptions(xAxisData, data, true, "", colorList, 22);
  gasCylinderReplaceTasksOptions.value = useLabelLayoutBarChartFn(
    ec,
    xAxisData,
    data,
    gasCylinderReplaceTasksTitle.value,
    "",
    colorList,
    false,
    "",
    ag
  );
  gasCylinderReplaceTasksRef.value?.loadingInstance?.close();
};

// 槽车填充今日任务
const tankFillingNotifyRef = ref<InstanceType<typeof echartsChart> | null>(null);
const tankFillingNotifyOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const tankFillingNotifyTitle = ref<string>("槽车填充今日任务");
const tankFillingNotifyInit = async () => {
  tankFillingNotifyRef.value.initLoading();
  let data = await queryTankTaskStat(null, () => {
    tankFillingNotifyRef.value?.loadingInstance?.close();
  });
  if (!data?.length) return tankFillingNotifyRef.value?.loadingInstance?.close();
  const ec = await tankFillingNotifyRef.value?.getEcharts();
  const xAxisData = data?.slice(1).map(item => item.name);
  data = data?.slice(1).map(item => item.num);
  const colorList = new Map([
    ["已完成", "#48B48F"],
    ["执行中", "#49B0F5"],
    ["未开始", "#FFB266"]
  ]);
  const ag = useGetBarChartsAgOptions(xAxisData, data, true, "", colorList, 22);
  tankFillingNotifyOptions.value = useLabelLayoutBarChartFn(ec, xAxisData, data, tankFillingNotifyTitle.value, "", colorList, false, "", ag);
  tankFillingNotifyRef.value?.loadingInstance?.close();
};

// 酸桶状态统计
const acidBucketStatusStatRef = ref<InstanceType<typeof echartsChart> | null>(null);
const acidBucketStatusStatOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const acidBucketStatusStatTitle = ref<string>("酸桶状态统计");
const acidBucketStatusStatInit = async () => {
  acidBucketStatusStatRef.value.initLoading();
  let metaData = await queryAcidBucketStatusStat(null, () => {
    acidBucketStatusStatRef.value?.loadingInstance?.close();
  });
  if (!metaData?.length) return acidBucketStatusStatRef.value?.loadingInstance?.close();
  const ec = await acidBucketStatusStatRef.value?.getEcharts();
  const data = metaData
    ?.filter(item => item.name !== "总计")
    ?.map(item => {
      const { name, num: value } = item;
      return { name, value };
    });
  const ag = useGetRingGraphAgOptions(metaData?.find(item => item.name === "总计")?.num);
  const colorList = new Map([
    ["运行", "#3B82F6"],
    ["停止", "#FF5639"]
  ]);
  acidBucketStatusStatOptions.value = useLabelLayoutRingGraphFn(ec, data, acidBucketStatusStatTitle.value, "", colorList, ag);
  acidBucketStatusStatRef.value?.loadingInstance?.close();
};

const getEchartsOptions = (data: Record<string, any>) => {
  const { unit = "", valueList = [] } = data;
  const grid = {
    top: 30,
    bottom: 0,
    left: 0,
    right: 0,
    containLabel: true
  };
  const legend = {
    show: true
  };
  const tooltip = {
    show: true,
    trigger: "axis"
  };
  const xAxisData = valueList.map(item => item.name);
  const xAxis = {
    type: "category",
    data: xAxisData
  };
  const yAxis = {
    type: "value",
    name: unit
  };
  const seriesData = valueList.map(item => item.num);
  const series = [
    {
      type: "line",
      data: seriesData
    }
  ];
  return { grid, legend, tooltip, xAxis, yAxis, series };
};

// 大宗气体流量统计
const gasFlowStatEchartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);
const gasFlowStatTypeOptions = ref<Array<any>>([]);
const gasFlowStatEchartsOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const gasFlowStatType = ref<string>("");
const gasFlowStatLoading = ref<boolean>(false);
const gasFlowStatEchartsLoading = ref<boolean>(false);
const queryBulkGasConsumptionStatFn = async () => {
  gasFlowStatEchartsLoading.value = true;
  const gasName = gasFlowStatType.value;
  const startDate = dayjs().subtract(7, "day").format("YYYY-MM-DD");
  const endDate = dayjs().format("YYYY-MM-DD");
  const params = { gasName, startDate, endDate };
  const res = await queryBulkGasConsumptionStat(params, () => {
    gasFlowStatEchartsLoading.value = false;
  });
  gasFlowStatEchartsOptions.value = getEchartsOptions(res);
  gasFlowStatEchartsComRef.value.initData(true);
  gasFlowStatEchartsLoading.value = false;
};
const gasFlowStatListInit = async () => {
  gasFlowStatLoading.value = true;
  // gasType  气体类型(BULK_GAS：大宗气，SPECIALTY_GAS：特气，CHEMICAL：化学品
  const res = await queryGasNameList({ gasType: "BULK_GAS" }, () => {
    gasFlowStatLoading.value = false;
  });
  gasFlowStatTypeOptions.value = res;
  gasFlowStatType.value = res[0];
  gasFlowStatLoading.value = false;
  await queryBulkGasConsumptionStatFn();
};

// 化学品用量统计
const chemicalEchartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);
const chemicalTypeOptions = ref<Array<any>>([]);
const chemicalEchartsOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const chemicalType = ref<string>("");
const chemicalLoading = ref<boolean>(false);
const chemicalEchartsLoading = ref<boolean>(false);
const queryConsumptionAnalysisFn = async () => {
  chemicalEchartsLoading.value = true;
  const itemKey = chemicalType.value;
  const startDate = dayjs().subtract(7, "day").format("YYYY-MM-DD");
  const endDate = dayjs().format("YYYY-MM-DD");
  const params = { itemKey, startDate, endDate };
  const res = await queryConsumptionAnalysis(params, () => {
    chemicalEchartsLoading.value = false;
  });
  chemicalEchartsOptions.value = getEchartsOptions(res[0]);
  chemicalEchartsComRef.value.initData(true);
  chemicalEchartsLoading.value = false;
};
const chemicalListInit = async () => {
  chemicalLoading.value = true;
  // gasType  气体类型(BULK_GAS：大宗气，SPECIALTY_GAS：特气，CHEMICAL：化学品
  const res = await queryGasNameList({ gasType: "CHEMICAL" }, () => {
    chemicalLoading.value = false;
  });
  chemicalTypeOptions.value = res;
  chemicalType.value = res[0];
  chemicalLoading.value = false;
  await queryConsumptionAnalysisFn();
};

// 质量指标
const spcExceedStatRef = ref<InstanceType<typeof echartsChart> | null>(null);
const spcExceedStatOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const spcExceedStatTitle = ref<string>("质量指标");
// const spcExceedStatInit = async () => {
//   spcExceedStatRef.value.initLoading();
//   let data = await querySpcExceedStat(null, () => {
//     spcExceedStatRef.value?.loadingInstance?.close();
//   });
//   if (!data?.length) return spcExceedStatRef.value?.loadingInstance?.close();
//   const ec = await spcExceedStatRef.value?.getEcharts();
//   const xAxisData = data?.map(item => item.name);
//   data = data?.map(item => item.num);
//   const colorList = ["#3B82F6", "#FABF2B", "#35CECB", "#FF5639", "#FA8400", "#9755E5", "#355592"];
//   const ag = useGetBarChartsAgOptions(xAxisData, data, false, "", colorList, 22);
//   ag.yAxis = { show: true };
//   ag.xAxis[0].axisLine = { show: true };
//   ag.xAxis[0].axisTick = { show: true };
//   spcExceedStatOptions.value = useLabelLayoutBarChartFn(ec, xAxisData, data, spcExceedStatTitle.value, "", colorList, false, "", ag);
//   spcExceedStatRef.value?.loadingInstance?.close();
// };

const toPage = (num: number, data?: any) => {
  let path = "";
  let tab = "";
  switch (num) {
    // 设备状态
    case 1:
      // path = "/all/equip/archive/ledger"; // 设备台账
      path = "/all/equip/runManage/record"; // 设备运行记录
      break;
    // 今日任务
    case 2:
      path = "/gas/operation/taskView"; // 设备运行记录
      break;
    // 今日报警
    case 3:
      path = "/all/alert/business"; // 报警管理-业务报警
      break;
    // 侦测器状态统计
    case 4:
      path = "/gas/operation/detectorManage/ledgerManage"; // 侦测器台账
      break;
    // 侦测器隔离今日任务
    case 5:
      path = "/gas/operation/detectorManage/isolate"; // 侦测器工单总览
      break;
    // 酸桶更换今日任务
    case 6:
      path = "/gas/operation/acidDrumManage/replaceAcidDrum"; // 酸桶更换我的工单  ///////
      tab = "myOrders";
      break;
    // 气瓶状态统计
    case 7:
      path = "/gas/operation/statusVisual/specialGasEquip";
      break;
    // 气瓶更换今日任务
    case 8:
      path = "/gas/operation/bottleManage/replaceBottle"; ////////
      tab = "myOrders";
      break;
    // 槽车填充今日任务
    case 9:
      path = "/gas/operation/acidDrumManage/fillingWagon"; /////////
      tab = "myOrders";
      break;
    // 酸桶状态统计
    case 10:
      path = "/gas/operation/statusVisual/acidDrumEquip";
      break;
    // 大宗气体流量统计
    case 11:
      path = "/gas/consumption/bulkGas"; // 大宗气耗量分析
      break;
    // 化学品用量统计
    case 12:
      path = "/gas/consumption/chemical"; // 化学品耗量分析
      break;
    // 质量指标
    case 13:
      path = "/gas/spc/spcsarch"; // SPC查询
      break;
    default:
      path = "";
      break;
  }
  const query = { tab };
  router.push({ path, query });
};

// 获取数据  设备状态 + 今日任务 + 今日报警
const queryDeviceStatisticsFn = async () => {
  const { subject: classCode } = routerStore;
  const params = { classCode };
  const res = await queryDeviceStatistics(params, () => {
    deviceStatisticsRef.value?.loadingInstance?.close();
    alarmStatRef.value?.loadingInstance?.close();
  });
  if (res) {
    deviceStatisticsQueryData.value = res;
  }
};

const initLoading = () => {
  deviceStatisticsRef.value.initLoading();
  deviceStatisticsTasksRef.value.initLoading();
  alarmStatRef.value.initLoading();
};

const toFullScreen = () => {
  const path = "/fullScreen/gas/operation/overview";
  const { subject: className } = routerStore;
  const query = { className };
  const params = { path, query };
  const { href } = router.resolve(params);
  window.open(href, "_blank");
};

const initStatusEnum = async () => {
  const res = await queryDictData({ typeCode: "EQP_RUN_STATUS" });
  if (!res?.length) return;
  for (const item of res) {
    const { name: label = "", value = "" } = item;
    if (deviceStatus[label]) {
      deviceStatusMap.value.set(label, { ...item, ...deviceStatus[label], value, label });
    }
  }
};

onMounted(async () => {
  // initLoading();
  await initStatusEnum();
  // // 获取数据  设备状态 + 今日任务 + 今日报警
  // queryDeviceStatisticsFn().then(async () => {
  //   // 设备状态
  //   await deviceStatisticsInit();
  //   // 今日任务
  //   await deviceStatisticsTasksRef.value?.init();
  //   deviceStatisticsTasksRef.value.loadingInstance.close();
  //   // 今日报警
  //   await alarmStatInit();
  // });
  // 侦测器状态统计
  detectorStatusStatInit();
  // 侦测器隔离今日任务
  // detectorIsolationTasksInit();
  // 酸桶更换今日任务
  acidBucketReplaceTasksInit();
  // 气瓶状态统计
  gasCylinderStatusStatInit();
  // 气瓶更换今日任务
  gasCylinderReplaceTasksInit();
  // 槽车填充今日任务
  tankFillingNotifyInit();
  // 酸桶状态统计
  acidBucketStatusStatInit();
  // 质量指标
  // spcExceedStatInit();
  // 大宗气体流量统计
  // gasFlowStatListInit();
  // 化学品用量统计
  // chemicalListInit();
});
</script>

<template>
  <div class="gas-overview">
    <!-- 设备状态 -->
    <!-- <div class="gas-overview-item one">
      <echartsChart
        ref="deviceStatisticsRef"
        arrow
        :height="height"
        :title="deviceStatisticsTitle"
        :options="deviceStatisticsOptions"
        @btn-click="toPage(1)"
      />
    </div> -->
    <!-- 今日任务 -->
    <!-- <div class="gas-overview-item two">
      <deviceStatisticsTasks ref="deviceStatisticsTasksRef" arrow :height="height" :query-data="deviceStatisticsQueryData" @btn-click="toPage(2)" />
    </div> -->
    <!-- 今日报警 -->
    <!-- <div class="gas-overview-item three">
      <echartsChart ref="alarmStatRef" arrow :title="alarmStatTitle" :options="alarmStatOptions" @btn-click="toPage(3)" />
    </div> -->

    <div class="one">
      <topBoard class-code="GAS" arrow />
    </div>

    <!-- 大宗气耗量统计 -->
    <div class="gas-overview-item four">
      <gasBoardBulkGasStatis ref="gasBoardBulkGasStatisRef" :height="196" />
    </div>
    <!-- 特气耗量统计 -->
    <div class="gas-overview-item five">
      <gasBoardSpecialGasStatis ref="gasBoardSpecialGasStatisRef" :height="196" />
    </div>
    <!-- 化学品耗量统计 -->
    <div class="gas-overview-item six">
      <gasBoardChemicalsStatis ref="gasBoardChemicalsStatisRef" :height="196" />
    </div>
    <!-- SPC -->
    <div class="gas-overview-item seven">
      <gasBoardSPCStatis ref="gasBoardSPCStatisRef" :height="196" />
    </div>

    <!-- 侦测器状态统计 -->
    <div class="gas-overview-item eight">
      <echartsChart
        ref="detectorStatusStatRef"
        arrow
        :height="height"
        :title="detectorStatusStatTitle"
        :options="detectorStatusStatOptions"
        @btn-click="toPage(4)"
      />
    </div>
    <!-- 气瓶状态统计 -->
    <div class="gas-overview-item nine">
      <echartsChart
        ref="gasCylinderStatusStatRef"
        arrow
        :height="height"
        :title="gasCylinderStatusStatTitle"
        :options="gasCylinderStatusStatOptions"
        @btn-click="toPage(7)"
      />
    </div>
    <!-- 酸桶状态统计 -->
    <div class="gas-overview-item ten">
      <echartsChart
        ref="acidBucketStatusStatRef"
        arrow
        :height="height"
        :title="acidBucketStatusStatTitle"
        :options="acidBucketStatusStatOptions"
        @btn-click="toPage(10)"
      />
    </div>
    <!-- 槽车填充今日任务 -->
    <div class="gas-overview-item eleven">
      <echartsChart
        ref="tankFillingNotifyRef"
        arrow
        :height="height"
        :title="tankFillingNotifyTitle"
        :options="tankFillingNotifyOptions"
        @btn-click="toPage(9)"
      />
    </div>

    <!-- 气瓶更换今日任务 -->
    <div class="gas-overview-item twelve">
      <echartsChart
        ref="gasCylinderReplaceTasksRef"
        arrow
        :height="height"
        :title="gasCylinderReplaceTasksTitle"
        :options="gasCylinderReplaceTasksOptions"
        @btn-click="toPage(8)"
      />
    </div>

    <!-- 酸桶更换今日任务 -->
    <div class="gas-overview-item thirteen">
      <echartsChart
        ref="acidBucketReplaceTasksRef"
        arrow
        :height="height"
        :title="acidBucketReplaceTasksTitle"
        :options="acidBucketReplaceTasksOptions"
        @btn-click="toPage(6)"
      />
    </div>
    <!-- 交接班 -->
    <div class="gas-overview-item fourteen">
      <gasBoardShiftTable ref="gasBoardShiftTableRef" />
    </div>

    <!-- 侦测器隔离今日任务 -->
    <!-- <div class="gas-overview-item five">
      <echartsChart
        ref="detectorIsolationTasksRef"
        arrow
        :height="height"
        :title="detectorIsolationTasksTitle"
        :options="detectorIsolationTasksOptions"
        @btn-click="toPage(5)"
      />
    </div> -->
    <!-- 大宗气体流量统计 -->
    <!-- <div class="gas-overview-item eleven">
      <modelBox title="大宗气体流量统计">
        <template #title>
          <px-button style="padding-right: 0" :icon="ArrowRightBold" type="primary" text plain @click="toPage(11)" />
        </template>
        <div v-loading="gasFlowStatLoading" class="gas-overview-item-line">
          <div class="gas-overview-item-line-select">
            <px-select v-model="gasFlowStatType" @change="queryBulkGasConsumptionStatFn">
              <px-option v-for="item in gasFlowStatTypeOptions" :key="item" :label="item" :value="item" />
            </px-select>
          </div>
          <div v-loading="gasFlowStatEchartsLoading" class="gas-overview-item-line-echarts">
            <echartsCom ref="gasFlowStatEchartsComRef" :options="gasFlowStatEchartsOptions" />
          </div>
        </div>
      </modelBox>
    </div> -->
    <!-- 化学品用量统计 -->
    <!-- <div class="gas-overview-item twelve">
      <modelBox title="化学品用量统计">
        <template #title>
          <px-button style="padding-right: 0" :icon="ArrowRightBold" type="primary" text plain @click="toPage(12)" />
        </template>
        <div v-loading="chemicalLoading" class="gas-overview-item-line">
          <div class="gas-overview-item-line-select">
            <px-select v-model="chemicalType" @change="queryConsumptionAnalysisFn">
              <px-option v-for="item in chemicalTypeOptions" :key="item" :label="item" :value="item" />
            </px-select>
          </div>
          <div v-loading="chemicalEchartsLoading" class="gas-overview-item-line-echarts">
            <echartsCom ref="chemicalEchartsComRef" :options="chemicalEchartsOptions" />
          </div>
        </div>
      </modelBox>
    </div> -->
    <!-- 质量指标 -->
    <!-- <div class="gas-overview-item thirteen">
      <echartsChart
        ref="spcExceedStatRef"
        arrow
        :height="height"
        :title="spcExceedStatTitle"
        :options="spcExceedStatOptions"
        @btn-click="toPage(13)"
      />
    </div> -->

    <div class="full-screen">
      <fullScreen class="icon" @click="toFullScreen" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.gas-overview {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(24, minmax(16px, 1fr));
  grid-auto-rows: 234px 264px 264px 264px 264px 264px 264px;
  grid-auto-flow: column dense;
  grid-gap: 16px;
  width: 100%;

  .full-screen {
    position: absolute;
    top: -10px;
    right: -16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background-color: var(--px-color-primary-light-9);
    border-radius: 4px;
    box-shadow: 0 0 4px 0 var(--px-color-primary-light-3);

    .icon {
      width: 70%;
      height: 70%;
      color: var(--px-color-primary);
    }

    &:hover {
      background-color: var(--px-color-primary-light-7);
      box-shadow: none;
    }
  }

  .gas-overview-item {
    display: flex;
    align-items: center;
    justify-content: center;

    .gas-overview-item-line {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;

      .gas-overview-item-line-select {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;

        .px-select {
          width: 140px;
        }
      }

      .gas-overview-item-line-echarts {
        flex: 1;
        height: 0;
      }
    }
  }

  .one {
    // grid-column: 1 / 7;
    grid-column: 1 / 25;
  }

  .two {
    grid-column: 7 / 21;
  }

  .three {
    grid-column: 21 / 25;
  }

  .four {
    grid-column: 1 / 25;
  }

  .five {
    grid-column: 1 / 25;
  }

  .six {
    grid-column: 1 / 25;
  }

  .seven {
    grid-column: 1 / 25;
  }

  .eight {
    grid-column: 1 / 9;
  }

  .nine {
    grid-column: 9 / 17;
  }

  .ten {
    grid-column: 17 / 25;
  }

  .eleven {
    grid-column: 1 / 7;
  }

  .twelve {
    grid-column: 7 / 13;
  }

  .thirteen {
    grid-column: 13 / 19;
  }

  .fourteen {
    grid-column: 19 / 25;
  }
}
</style>
